<html>
<h2>Quản Lý Khách hàng</h2>
<p id="page-intro">Danh sách khách hàng trên website</p>
<div class="clear"></div>
<div class="content-box">
    <div class="content-box-header">
        <h3>Danh sách Khách hàng</h3>
    </div>
    <div class="content-box-content">
        <form action="javascript:void(0);">
            Tên khách hàng: <input class="text-input small-input" type="text" />  <a class="alt btn" href="#">Tìm kiếm</a>
        </form>
        <form action="javascript:void(0);">
            <table>
                <thead>
                <tr>
                    <th class="left w5"><input class="check-all" type="checkbox" /></th>
                    <th class="w5">ID</th>
                    <th class="left w20">Tên Đăng nhập</th>
                    <th class="left w20">Khách hàng</th>
                    <th>Ngày Đăng ký</th>
                    <th class="w15">Trạng thái</th>
                    <th class="w15">Thao tác</th>
                </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="checkbox" name="user" value="1" /></td>
                        <td class="center">1</td>
                        <td><a class="edit" href="#" title="Tên Đăng nhập: pvb88">pvb88</a></td>
                        <td><a class="edit" href="#" title="Khách hàng: Phạm Văn B">Phạm Văn B</a></td>
                        <td class="center">20/3/2012</td>
                        <td class="center">Đã Kích hoạt</td>
                        <td class="center">
                            <a href="#" class="edit" title="Sửa"><img src="images/icons/pencil.png" alt="Sửa" /></a>
                            <a href="#" class="delete" title="Xoá"><img src="images/icons/cross.png" alt="Xoá" /></a>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="user" value="2" /></td>
                        <td class="center">2</td>
                        <td><a class="edit" href="#" title="Tên Đăng nhập: pvcvn">pvcvn</a></td>
                        <td><a class="edit" href="#" title="Khách hàng: Phạm Văn C">Phạm Văn C</a></td>
                        <td class="center">20/3/2012</td>
                        <td class="center">Đã Kích hoạt</td>
                        <td class="center">
                            <a href="#" class="edit" title="Sửa"><img src="images/icons/pencil.png" alt="Sửa" /></a>
                            <a href="#" class="delete" title="Xoá"><img src="images/icons/cross.png" alt="Xoá" /></a>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="user" value="2" /></td>
                        <td class="center">3</td>
                        <td><a class="edit" href="#" title="Tên Đăng nhập: lqanh">lqanh</a></td>
                        <td><a class="edit" href="#" title="Khách hàng: Lê Quỳnh Anh">Lê Quỳnh Anh</a></td>
                        <td class="center">20/3/2012</td>
                        <td class="center">Đã Kích hoạt</td>
                        <td class="center">
                            <a href="#" class="edit" title="Sửa"><img src="images/icons/pencil.png" alt="Sửa" /></a>
                            <a href="#" class="delete" title="Xoá"><img src="images/icons/cross.png" alt="Xoá" /></a>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="7">
                        <div class="bulk-actions align-left">Với các hàng được chọn:
                            <a href="#" class="alt btn" rel="delete">Xoá</a>
                        </div>
                        <div class="pagination">
                            <a href="#" class="number" title="Trang đầu">&#0171;</a><a class="number" href="#" title="Trang trước">&#0139;</a>
                            <a href="#" class="number current" title="1">1</a>
                            <a href="#" class="number" title="2">2</a>
                            <a href="#" class="number" title="3">3</a>
                            <a href="#" class="number" title="4">4</a>
                            <a href="#" class="number" title="Trang sau">&#0155;</a><a href="#" class="number" title="Trang cuối">&#0187;</a>
                        </div> <!-- End .pagination -->
                        <div class="clear"></div>
                    </td>
                </tr>
                </tfoot>
            </table>
        </form>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        //Tạo event click check all checkbox
        $('.check-all').click(function(){
            $(this).parent().parent().parent().parent()
                    .find("input[type='checkbox']")
                    .attr('checked', $(this).is(':checked'));
        });
        //Đổi màu các hàng chẵn
        $('tbody tr:even').addClass("alt-row");
        //Tạo event click cho các link Xoá danh mục
        $('a.delete').click(function(){
            if(confirm("Bạn muốn xoá?")){
                $(this).parent().parent().find("input[type='checkbox']").each(function(){
                    removeRow(this);
                });
            }
            return false;
        });
        $('a.edit').click(function(){
            window.location.href = 'index.html#edit_user';
            jewelryCP.loadItem('edit_user', $("#main-nav li a.nav-top-item.current"));
            return false;
        });
        //Tạo event click cho nút Xoá
        $('a[rel="delete"]').click(function(){
            if(confirm("Bạn muốn xoá?")){
                $('table').find("input[type='checkbox']:checked").each(function(){
                    if(this.className!='check-all'){
                        removeRow(this);
                    }
                });
            }
            return false;
        });
    });
    //Hàm xoá 1 hàng
    function removeRow(obj){
        $(obj).parent().parent().fadeOut('slow',function(){
            $(this).remove();
        });
    }
</script>
</html>